// Colors
:root
  --red-0: #ff0000
  --red-1: #ff5252
  --red-2: #ff7c7c
  --red-3: #ffafaf
  --red-4: #ffd0d0
  --red-5: #ffe4e4
  --red-5-5: #ffecec
  --red-6: #fff3f3

  --color-default-font: black
  --color-default: #555
  --color-grey: #999
  --color-border: var(--red-3)
  --color-link: var(--red-1)
  --color-dark-link: darken(#ff5252, 20%)
  --color-background: #eee
  --color-code-background: #f5f5f5
  --color-sidebar-text: #777
  --color-header-background: rgba(255, 255, 255, 0.9)
  --color-footer-background: #fff
  --color-mobile-nav-background: #fff
  --color-wrap: #fff
  --color-twitter: #00aced
  --color-facebook: #3b5998
  --color-pinterest: #cb2027
  --color-linkedin: #0077B5
  --color-dark-twitter: darken(#00aced, 20%)
  --color-dark-facebook: darken(#3b5998, 20%)
  --color-dark-pinterest: darken(#cb2027, 20%)
  --color-dark-linkedin: darken(#0077B5, 20%)
  --color-sticky: #ffecec

  --color-h2-border: #eee
  --color-meta-shadow: --var(--red-6)
  --color-hover-shadow: rgba(150, 150, 150, 0.1)
  --color-h2-after: rgba(255, 0, 0, 0.6)
  --color-h2-after-shadow: rgba(255, 78, 106, 0.7)

  --highlight-nav: #e6e6e6
  --highlight-scrollbar: #d6d6d6
  --highlight-background: #f7f7f7
  --highlight-current-line: #dadada
  --highlight-selection: #e9e9e9
  --highlight-foreground: #4d4d4d
  --highlight-comment: #7d7d7d
  --highlight-red: #c8362b
  --highlight-orange: #b66014
  --highlight-yellow: #cb911d
  --highlight-green: #2ea52e
  --highlight-aqua: #479d9d
  --highlight-blue: #1973b8
  --highlight-purple: #7135ac
[data-theme="dark"]
  &:root
    --red-0: #ff5252
    --red-1: #ff5252
    --red-2: #ff7c7c
    --red-3: #ffafaf
    --red-4: rgba(255,208,208,0.5)
    --red-5: rgba(255,228,228,0.2)
    --red-5-5: rgba(255,236,236,0.1)
    --red-6: rgba(255,243,243,0.2)

    --color-default-font: #999
    --color-default: #999
    --color-grey: #999
    --color-border: var(--red-5)
    --color-link: var(--red-1)
    --color-dark-link: darken(#ff5252, 20%)
    --color-background: #21252b
    --color-code-background: rgba(232,232,232,0.2)
    --color-sidebar-text: #777
    --color-header-background: #222222
    --color-footer-background: #21252b
    --color-mobile-nav-background: #21252b
    --color-wrap: #272b30
    --color-twitter: #00aced
    --color-facebook: #3b5998
    --color-pinterest: #cb2027
    --color-linkedin: #0077B5
    --color-dark-twitter: darken(#00aced, 20%)
    --color-dark-facebook: darken(#3b5998, 20%)
    --color-dark-pinterest: darken(#cb2027, 20%)
    --color-dark-linkedin: darken(#0077B5, 20%)
    --color-sticky: #ffecec

    --color-h2-border: #47474a
    --color-meta-shadow: rgba(0, 0, 0, 0.2)
    --color-hover-shadow: rgba(0, 0, 0, 0.2)
    --color-h2-after: #ff5252
    --color-h2-after-shadow: rgba(255, 78, 106, 0.7)

    --highlight-nav: #2e353f
    --highlight-scrollbar: #454d59
    --highlight-background: #22272e
    --highlight-current-line: #393939
    --highlight-selection: #515151
    --highlight-foreground: #cccccc
    --highlight-comment: #999999
    --highlight-red: #f47067
    --highlight-orange: #f69d50
    --highlight-yellow: #ffcc66
    --highlight-green: #99cc99
    --highlight-aqua: #66cccc
    --highlight-blue: #54b6ff
    --highlight-purple: #dcbdfb
    img
      filter: brightness(70%)

    // 排除fancybox
    .fancybox-content
      img.lazyloaded
        opacity: 1
        animation: blur 0.8s ease-in-out forwards

    img.lazyloaded
      opacity: 1
      animation: blur-darken 0.8s ease-in-out forwards

// Fonts
font-title = Mulish,'Noto Serif SC','Noto Serif JP',Mulish,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif
font-sans = Mulish,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif
font-serif = Georgia, "Times New Roman", serif
font-mono = "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace
font-icon = "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome"
font-size = 14px
line-height = 1.8em
line-height-title = 1.2em

// Header
logo-size = 40px
subtitle-size = 18px
banner-height = 400px

sidebar = hexo-config("sidebar")
reimu_cursor = hexo-config("reimu_cursor")

// Layout
block-margin = 50px
article-padding = 20px
mobile-nav-width = 280px
main-column = 9
sidebar-column = 3

_sidebar-column = sidebar-column

// Grids
column-width = 80px
gutter-width = 20px
columns = main-column + _sidebar-column

// Media queries
mq-mobile = "screen and (max-width: 479px)"
no-mobile = "screen and (min-width: 480px)"
mq-tablet = "screen and (min-width: 480px) and (max-width: 767px)"
mq-normal = "screen and (min-width: 768px)"
mg-normal = "screen and (max-width: 767px)"
mq-large = "screen and (min-width: 960px)"
mg-large = "screen and (max-width: 959px)"

post-radius = 5px
